CSS Transitions

當元素使用到 HTMX 的替換內容功能時，會自動加上已經寫好的 css transition 效果，不需要再用 JS 控制。

以下為官方範例：

• 這是替換前的元素

<!-- 假設 #div1 是 htmx 渲染區塊 -->
<div id="div1">原始內容</div>

• 這是替換後的元素

<div id="div1" class="red">新內容</div>

• 這是替換後元素的 CSS 樣式

.red {
    color: red;
    transition: all ease-in 1s;
}

完成以上三個內容後，當 AJAX 完成並替換元素內容，就會套用 CSS transition 的效果。

注意事項

1. 替換前和替換後的元素都要有一樣的 id 才能正常套用過渡效果，例如上方範例中原始的元素 id 是 #div1，替換後元素的 id 也要是 #div1。
2. trasition 的 class 要放在新的元素上。

更多動畫效果的範例可以參考 https://htmx.org/examples/animations/
參考資料 https://htmx.org/docs/#css_transitions